<template>
  <view class="body">
    <view v-if="videoUrl != ''">
      <yingbing-video class="VideoPalyer" :src="videoUrl" :videoUrl="videoUrl" v-if="videoUrl" controls
	  :poster="pic" 
	  next-btn-show 
	  @nextBtnClick="onNextBtnclick"
	  :autoplay="true"
	  :srcList="videoList"
	  :title="title"
	  
	  >
	  <template controls>
	    	<div style="position:absolute;top:0;left:0;right:0;color: #b3b3b3;"></div>
	
	  	<!-- <text class="current-time">{{ currentTime }}</text -->
	   <text class="djj-text">第{{ currentIndex + 1 }}集</text>
	  
	  	     <!-- 投屏图片按钮 -->
	  	    <div>    </div>
	    	<div class="button-container">
	  		  <!-- <text @click="toggleScrollView" class="transparent-button-text">选集</text> -->
	  	</div>
	  	<view class="scroll-view-content">
	  	<scroll-view scroll-y="true" class="scroll-view-container" v-show="showSelection">
	  	       
	  	          <view v-if="showSelection">
	  	           <view class="cell-box" v-if="videoList.length>0">
	  	           	<view class="cell-item" v-for="(item,index) in videoList[current].urlList" :key="index"
	  	           		@click="btnClick(item,index)"
	  	           		v-bind:style="[{background:currentIndex==index?'#fd8008':'',color:currentIndex==index?'#ffffff':''}]">
	  	           		<view class="cell-text">
	  	           			<text>{{item.title}}</text>
	  	           		</view>
	  	           	</view>
	  	           </view>
	  	          </view>
	  	        </scroll-view>
	  </view>
	    	
	    </template>
	  </yingbing-video>
    </view>
	
    <view class="video_bio" v-else></view>
	<view style="padding: 20rpx;">
    		<view class="info">
    			<text class="title">{{title}}</text>
    			<text class="intro">{{intro}}</text>
    		</view>
    		<view class="list-view-content">
    			<list-view  class="list-view-container" >
    			       
    			         
    			           <view class="list-box" v-if="videoList.length>0">
    			           	<view class="list-item" v-for="(item,index) in videoList[current].urlList" :key="index"
    			           		@click="btnClick(item,index)"
    			           		v-bind:style="[{background:currentIndex==index?'#fd8008':'',color:currentIndex==index?'#ffffff':''}]">
    			           		<view class="list-text">
    			           			<text>{{item.title}}</text>
    			           		</view>
    			           	</view>
    			           </view>
    			          
    			        </list-view>
    		</view>
    		</view>
    	</view>
</template>

<script>
  
  export default {
    data() {
      return {
        announcement: "本软件所有视频内容均来自网络，本软件不存储任何视频数据，请勿相信视频中的广告，视频中的广告非本软件的广告，如果相信视频广告被骗与大金哥影院无关。有什么建议可以在定制页面复制微信联系，可以定制各种软件。", // 公告内容
        watchHistory: [], // 观看记录数组
        url: '',
        intro: "", 
        isParse: true,
        pic: "",
        resourceUrl: "", 
        title: "",
        videotitle: "",
        videointro: "",
        videoUrl: "",
        fileType: '3', // 文件类型，对于视频，
        videoList: [],
        vid: "",
        current: 0,
        currentIndex: 0,
        actor: "",
        area: "",
        year: "",
        videoEpisode: '',
        index:'',
        fullScreen: false,
        platform:'',
        introDuration: 120, // 片头时长（秒）
        outroDuration: 120, // 片尾时长（秒）
        percentage:0,
        complete:0,
        count:0,
        showSelection: false,
        HD:'',
        currentTime: '',
        timeInterval: null, 
        player: null,
         // 片头片尾时间
        skipStartTime: 120, // 默认不跳过片头
        skipEndTime: 0, // 默认不跳过片尾
      };
    },
    onLoad(e) {
      uni.showLoading({
        title: '正在加载...'
      });
      var that = this;
      that.url = uni.getStorageSync('url');
      uni.getStorage({
        key: 'url',
        success: function(res) {
          that.url = res.data;
        }
      });
      uni.request({
        url: that.url,
        data: {
          ac: 'videolist',
          ids: e.id
        },
        method: 'GET',
        header: {
          'content-type': 'application/json'
        },
        success: function(res) {
          uni.hideLoading();
          var i = res.data.list[0]['vod_play_url'],
            a = [];
          // for (var o in i) {
          var r = {},
            n = [],
            d = [];
          
          // 字符串替换
          console.log(i);
          console.log('------------');
          i = i.replace("$$$", "#");
          console.log(i);
          if (i.indexOf("#") > 0) {
            n = i.split("#");
            console.log(n);
            for (var l in n) {
              c = {
                title: n[l].split("$")[0],
                url: n[l].split("$")[1]
              };
              console.log(c);
              if (c["url"].includes('.m3u8')) {
                d.push(c);
              }
            }
          } else if (2 == i.split("$").length) {
            var c = {
              title: i.split("$")[0],
              url: i.split("$")[1]
            };
            if (c["url"].includes('.m3u8')) {
              d.push(c);
            }
          }
          
          r.urlList = d, a.push(r);
          console.log(r);
          // }
          that.videoList = a;
          // that.isParse = a[0].isParse;
          that.title = res.data.list[0].vod_name;
		   that.pic = res.data.list[0].vod_pic;
		            that.videoUrl = a[0].urlList[0].url;
		            that.resourceUrl = a[0].urlList[0].title;
		            that.intro = res.data.list[0].vod_blurb;
		          },
		          fail: function() {
		            uni.hideLoading();
		            uni.showModal({
		              title: '网络错误',
		              content: '网络出错，请刷新重试',
		              showCancel: !1
		            });
		          }
		        });
		      },
		      mounted() {
		      		  
		      		 },
		      		 
		      		
		      		methods: { 
		      			 //切换下一个视频
		      			        onNextBtnclick () {
		      			            console.log('播放下一集按钮被点击'); // 添加调试信息
		      			            if (this.currentIndex < this.videoUrl.length - 1) {
		      			              this.currentIndex += 1;
		      			              this.videoUrl = this.videoUrl[this.currentIndex];
		      						  this.$refs.videoPlayer.play();
		      			            } else {
		      			              uni.showToast({
		      			                title: '已经是最后一集',
		      			                icon: 'none'
		      			              });
		      			            }
		      			        },
		      		toggleScrollView() {
		      			    this.showSelection = !this.showSelection; // 切换 scroll-view 的显示状态
		      			    // 设置一个定时器来隐藏 scroll-view
		      			    if (this.showSelection) {
		      			      this.scrollViewTimeout = setTimeout(() => {
		      			        this.showSelection = false; // 隐藏 scroll-view
		      			      }, 5000); // 3000 毫秒后隐藏 scroll-view
		      			    } else {
		      			      clearTimeout(this.scrollViewTimeout); // 清除定时器
		      			    }
		      			  },
		      				  
		      			    // 添加屏幕点击事件监听器
		      			    onScreenClick() {
		      			      if (this.showSelection) {
		      			        this.showSelection = false; // 如果 scroll-view 是显示的，点击屏幕时隐藏它
		      			      }
		      			    },
		      			
		      			 skipIntro() {
		      			      const player = this.$refs.video;
		      			      if (player) {
		      			        player.currentTime += this.introDuration;
		      			      }
		      			    },
		      			    skipOutro() {
		      			      const player = this.$refs.video;
		      			      if (player) {
		      			        player.currentTime = player.duration - this.outroDuration;
		      			      }
		      			    },
		      			addToWatchHistory(video) {
		      			      // 添加视频到观看历史
		      			      const newHistory = this.watchHistory.concat(video);
							  debugger
		      			      this.$storage.set('watchHistory', newHistory);
		      			      this.watchHistory = newHistory;
		      			    },
		      			    getWatchHistory() {
		      			      // 从存储中获取观看历史
		      			      const history = this.$storage.get('watchHistory') || [];
		      			      this.watchHistory = history;
		      			      return history;
		      			    },
		      			    clearWatchHistory() {
		      			      // 清空观看历史
		      			      this.$storage.set('watchHistory', []);
		      			      this.watchHistory = [];
		      			    },
		      		 capture () {
		      		            this.$refs.video.capture()
		      		        },
		      		        //截图完成事件
		      		        onCaptureFinish (e) {
		      		            console.log(e)
		      		        },   
		      			change(index) {
		      				this.current = index;
		      				this.isParse = this.videoList[index].isParse;
		      				// this.play();
		      			},
		      			btnClick(item, index) {
		      				this.videoUrl = item.url;
		      				this.resourceUrl = item.title;
		      				this.currentIndex = index;
		      				// this.play();
		      			},
		      		},
		      		 
		      		 
		      		   
		      		
		      	
		      	}
		      </script>
		      
		      <style lang="scss">
		      	page {
		      		background-color: #000000;
		      	}
		      	.share-button {
		      	  /* 设置图片按钮的样式 */
		      
		      	  top: 50px; /* 距离视频顶部50像素 */
		      	 left: 1%; /* 距离视频右侧50像素 */
		      	  width: 33px; /* 根据需要调整宽度 */
		      	  height: 33px; /* 根据需要调整高度 */
		      	  cursor: pointer; /* 设置鼠标指针样式为手指，表明可以点击 */
		      	}
		      	.djj-text {
		      	  /* 集数文本的样式 */
		      	  color: white; /* 设置文本颜色为白色 */
		      	  background-color: rgba(255, 255, 255, 0); /* 设置背景颜色为半透明的黑色 */
		      	  padding: 4px 8px; /* 设置内边距 */
		      	  border-radius: 4px; /* 设置圆角 */
		      	  position: absolute; /* 设置绝对定位 */
		      	  top: 0px; /* 设置距离顶部10像素 */
		      	  right: 0px; /* 设置距离右侧10像素 */
		      	  font-size: 10px; /* 设置字体大小 */
		      	  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* 设置文本阴影，增强可读性 */
		      	}
		      	.screen-mirroring-button {
		      	position: absolute;
		      	  top: 40px; /* 距离视频顶部50像素 */
		      	  right: 1%; /* 距离视频右侧50像素 */
		      	  width: 40px; /* 按钮宽度 */
		      	  height: 40px; /* 按钮高度 */
		      	  
		      	}
		      	
		      	.logo {
		      	  position: absolute;
		      	  top: 1px; /* 调整logo的垂直位置 */
		      	  left: 10px; /* 调整logo的水平位置 */
		      	  width: 60px; /* 调整logo的宽度 */
		      	  height: 30px; /* 调整logo的高度 */
		      	  
		      	}
		      .list-view-content {
		        /* ... 省略其他样式 ... */
		      }
		      
		      .list-view-container {
		        /* ... 省略其他样式 ... */
		      }
		      
		      .list-box {
		         display: flex;
		          flex-wrap: wrap; /* 允许子项换行 */
		          // justify-content: ; /* 子项之间留有间距 */
		      }
			  
		      
		      .list-item {
		        background-color: #6666ff;
		        color: white;
		        display: flex;
		        justify-content: center; /* 居中显示按钮 */
		        align-items: center; /* 垂直居中显示按钮 */
		        width: 28%; /* 每个子项占33.33%的宽度 */
		        height: 60rpx; /* 设置每个子项的高度 */
		        padding: 10rpx;
		        border-radius: 15rpx;
		        box-sizing: border-box; /* 包含内边距在宽度计算中 */
		        margin-bottom: 16rpx; /* 添加底部内边距以留出间距 */
				margin-right: 20rpx;
		      }
		      
		      .list-text {
		        /* ... 省略其他样式 ... */
		      }
		      	
		      .button-container {
		        position: absolute;
		        top: 90px;
		        right: 0px;
		        transform: translateY(-50%);
		      }
		      
		      .transparent-button-text {
		        background-color: rgba(255, 255, 255, 0);
		        border: none;
		        font-size: 13px;
		        color: #ffffff;
		        cursor: pointer;
		        padding: 10px;
		      }
		      
		      
		      	.video {
		      		width: 100%;
		      		height: 400rpx;
		      	}
		      
		      	.video_bio {
		      		width: 100%;
		      		height: 400rpx;
		      		background-color: black;
					padding: 10rpx;
		      	}
		      
		      	.info {
		      		padding: 20rpx;
		      		background-color: #000000;
		      		display: flex;
		      		flex-direction: column;
		      
		      		.title {
		      			font-size: 32rpx;
		      			font-weight: 500;
		      			color: #ffffff;
		      			padding-top: 15rpx;
		      			padding-bottom: 15rpx;
		      		}
		      
		      		.intro {
		      			font-size: 28rpx;
		      			color: #ffffff;
		      			line-height: 40rpx;
		      		}
		      	}
		      .image {
		      	padding: 15rpx;
		      	}
		      	
		      	.marquee {
		      	  display: inline-block;
		      	  white-space: nowrap;
		      	  overflow: hidden;
		      	  animation: marquee 50s linear infinite;
		      	  color: #ffffff;
		      	}
		      	
		      	@keyframes marquee {
		      	  0% {
		      	    transform: translateX(100%);
		      	  }
		      	  100% {
		      	    transform: translateX(-100%);
		      	  }
		      	}
		      	.scroll-view-container {
		      	  position: absolute;
		      	  top: 50%;    
		      	  left: 50%;
				  padding: 20rpx 0;
		      	  transform: translate(-50%, -50%);
		      	  width: 300rpx;
		      	  height: 400rpx;
		      	  background-color: rgba(102, 102, 102, 0.8);
		      	  color: #fff;
		      	  border-radius: 10rpx;
		      	  overflow: hidden;
		      	  .cell-text {
		      	    text-align: center; /* 设置文本居中 */
		      	  }
		      	}
		      
		      	
		      	
		      	.current-time {
		      	  position: absolute;
		      	  top: 10rpx; /* 调整显示位置的垂直位置 */
		      	  right: 5px; /* 调整显示位置的水平位置 */
		      	  color: #ffffff; /* 文本颜色 */
		      	  font-size: 12px; /* 字体大小 */
		      	  z-index: 1; /* 确保显示在视频播放器上方 */
		      	}
		      </style>